<template> 
	<div class="nav">
		<div class="nav-inner">
			<a href="/" aria-label="Tiesec">
				<img src="http://127.0.0.1:8080/src/public/img/logo.png" alt="" class="logo-img" />

			</a>
			<nav role="navigation" class="appHeader-nav">
				<a class="appHeader-navItem" href="/">首页</a>
				<a class="appHeader-navItem" href="/explore">关于</a>
				<a class="appHeader-navItem" href="/topic">归档</a>
				<a class="appHeader-navItem" href="/topic">作品</a>
			</nav>
		</div>
	</div>

</template>


<script> 
  export default { 
  		data () {
  			return {
  				
  			}
  		}
  }
</script>

<style scoped>
	.nav {
		width: 100%;
	    min-width: 1032px;
	    height: 60px;
	    overflow: hidden;
	    background: #fff;
	    border-bottom: 1px solid rgba(30,35,42,.06);
	    box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
	    background-clip: content-box;
	}

	.nav-inner {
		width: 1000px;
		height: 100%;
		margin: 0 auto;
		display: flex;
		align-items: center;
	}

	.logo-img {
		width: 70px;
		height: 35px;
	}

	.appHeader-nav{
		display: -webkit-box;
	    display: -ms-flexbox;
	    display: flex;
	    -webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	    justify-content: space-between;
	    width: 250px;
	    height: 60px;
	    margin-right: 27px;
	    margin-left: 27px;
	    color: #999;
	}

	.appHeader-navItem {
	    padding: 0 10px;
	    font-size: 15px; 
	    height: 58px;
	    line-height: 60px;
	    display:block;
	    color: #8590a6;
	}

	.appHeader-navItem:hover {
		border-bottom: 2px solid #0F88EB;
	}

</style>